<template>
    <div>
        <!-- 头部导航栏 -->
        <!-- @click-left="$router.back()" 返回上一页 -->
        <div class="head">
        <van-nav-bar   title="购物车"  left-arrow @click-left="$router.back()"> 
            <template #right>
                <van-icon name="ellipsis" size="18" />
            </template>
         </van-nav-bar>
        </div>
         <!-- 购物车内容 -->
         <main>
        <van-swipe-cell v-for="item in store.cartList" :key="item.goodsId">
            
            
            <div class="cartgood">
                <van-checkbox v-model="item.checked"></van-checkbox>
                <van-card
                    :price="item.sellingPrice"
                    :title="item.goodsName"
                    class="goods-card"
                    :thumb="item.goodsCoverImg"
                >
                <template #num>
                    <van-stepper v-model="item.goodsCount" @change="changeGoodS(item)" />
                </template>
                </van-card>

            </div>
            
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button"
                @click="deleteCart(item)" />
            </template>
        </van-swipe-cell>
        </main>
        <van-empty description="购物车空空如也" v-show="store.cartList.length == 0"/>
        <van-submit-bar :price="priceAll*100" button-text="结算" @submit="onSubmit">
            <van-checkbox v-model="checkedAll" >全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>
        <footer>

        </footer>
    </div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { useCart } from '../../store/cartStore';
import { ref } from "vue" 
import { delCart } from "../../api/index.js"
import { useRoute,useRouter } from 'vue-router';
let router = useRouter();
let store = useCart()
let goodsIds =ref([])
onMounted(()=>{
    store.getCartList()
    console.log(store.cartList);
})
// 删除购物车数据
let deleteCart =(item)=>{
   store.deleteCart(item.cartItemId)
}
// 实现商品总价合计
let priceAll =computed({
    get(){
        return store.cartList.reduce((prev,next)=>{
            return (prev + (next.checked? next.goodsCount*next.sellingPrice : 0))
        },0)
    }
})
// 实现全选计算属性
let checkedAll= computed({
    get(){
        return store.cartList.every(item =>item.checked)
    },
    // val 当计算属性改变时，把最新的val值给set
    set(val){
        return store.cartList.forEach(item=>item.checked=val)
    }
})
// 步进器的实现
let changeGoodS=(item)=>{
    store.changeGoodS(item.cartItemId,item.goodsCount)
}
// 结算按钮
let onSubmit=()=>{
    store.cartList.filter(item=>{
        if(item.checked){
            goodsIds.value.push(item.cartItemId)
        }
    })
    localStorage.setItem("ids",goodsIds.value)
    console.log(goodsIds.value);
    router.push('/address')
}
</script>
<style lang="less">
.head{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
}
main{
    margin-top: 40px;
}

.van-swipe-cell{
    
    .cartgood{
        display: flex;
        .van-checkbox {
            margin: 0 10px;
           
        }
        .van-card{
            width: 90%;
            margin-top: 10px;
        }
    }
    .van-button{
        height: 100%;
        margin-top: 10px;
    }
    // .van-checkbox{
    //    float: left;
    // }
    // .van-card{
    //     float: left;
    // }

}
.van-submit-bar{
    margin-bottom: 50px;
}
footer{
    height: 150px;
}
</style>